<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task6</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="parper">
		<nav>
			<div id="navleft">
				<span>ife.baidu.com
				</span>
			</div>
			<div id="navright">
				<span>2017.03</span>
			</div>
		</nav>
		<div id="up" class="group">
			<article id="upleft">
				<img src="zuoshang.png" alt="左上图片">
				<div id="uplefttext">
					<div class="updiv">
						<span id="whattext">What</span>
						<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>
					</div>
					<div class="updiv">
						<span id="whentext">When</span>
						<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>
					</div>
					<div class="updiv">
						<span id="howtext">How</span>
						<p>测试测试测试测试测试测试测试测试测试测试测试测试<br>
						<div id="smalldiv">
							<p class="howtext2">What-------<span>40%</span>
							</p>
							<p class="howtext2">What-------<span>30%</span>
							</p>
							<p class="howtext2">What-------<span>30%</span>
							</p>
						</div>
						</p>
					</div>
				</div>
			</article>
			<aside>
				<header>
					<p class="asidehead">ABOUT</p>
					<p class="asidehead" id="secondtext">TECHNOLOGE</p>
					<p id="asidesmalltext">About technologe about technologe about technologe</p>
				</header>
			
				<div id="asidebignum">700</div>
				<div id="asidelastnumdiv">
					<div id="asidelastlefttext">
						3.2
					</div>
					<div id="asidelastrighttext">
						<p>CSS</p>
						<span>csscsscsscsscsscsscss</span>
					</div>
				</div>
			</aside>
		</div>
		<div id="down">
			<article id="downleft">
				<header>
					<p id="downleftheaderp1"><span>THE</span>TECHNOLOGE <br>OF FRONT</p>
					<p id="downleftheaderp2">前端技术领域</p>
				</header>
				<div id="downlefttext">
					<p>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<br>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<img src="zuoxia.png" alt="左下图片">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<br>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<br>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<br>
						前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端<br>
					</p>

				</div>
				
			</article>
			<article id="downright">
				<img src="youxia.png" alt="右边下方图片">

				<div id="downrighttext">
					<div id="menu">
						<p>▲前端前端前端前端前端前端.....................<span>前端</span></p>
						<p>▲前端前端前端前端.............................<span>前端</span></p>
						<p>▲前端前端前端前端前端前端.....................<span>前端</span></p>
					</div>
					<div id="downrightlastdiv">
						<div id="downrightlastleft">
							<span>0</span>
						</div>
						<div id="downrightlastright">
							<p>
								ONE TWO <br>THREE FOUR FIVE
							</p>
							<span>
								hello world hello world <br>	
								hello world
							</span>
						</div>
					</div>
					<div id="downrightlasttext">
						
						<p><span id="downlastspan1">“</span>
							hello world hello world hello world hello world hello world hello world hello world hello world <span id="downlastspan2">”</span>
						</p>

					</div>
				</div>
			</article>
		</div>

		<footer>
			<span>ife.baidu.com</span>
		</footer>
	</div>
	
</body>
</html>